<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/amazeui.min.css"/>
        <link href="{$_C.hy_path}css/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet" type="text/css" /> 
    <link href="{$_C.hy_path}css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
		<style type="text/css">
		img{ max-width: none;}
		    .hy-cutimg-main{ padding: 5px;border: 1px dashed #9B9B9B; background: #ccc;}
		    #crop_container{ margin: 0 auto;}
		</style>
	     
	</head>
	<body>
	<div class="am-g">
		<div class="hy-cutimg-header">
			<div class="am-u-md-2">
			</div>
		</div>
		<div class="hy-cutimg-main">
			
				 <div id="crop_container"></div>
		<button class="am-btn am-btn-success  hy-js-savecut">保存截图</button>
		<button class="am-btn am-btn-default  hy-js-restore">重置</button>
		</div>
		
		<div class="hy-cutimg-footer am-margin-top">
			<input type="hidden" id="thumb" value="">
			
			<button class="am-btn am-btn-primary am-btn-block hy-js-save">确定并返回</button>
		</div>
		
	</div>
	<script src="{$_C.hy_path}js/hy.base.js"></script>
	<script src="{$_C.hy_path}js/jquery-1.7.2.min.js"></script>
    <script src="{$_C.hy_path}js/amazeui.min.js"></script>	
  <script type="text/javascript" src="{$_C.hy_path}js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="{$_C.hy_path}js/jquery.cropzoom.js"></script>
   <script>
    $(function($){
 var cropzoom = $('#crop_container').cropzoom({
            width:{$img.w},
            height:{$img.h},
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            selector:{ 
            	w:100,
            	h:100,
              centered:true,
              startWithOverlay: true,
              borderColor:'blue',
              borderColorHover:'red'
            },
            image:{
                source:'{$img.src}',
                width:'{$img.w}',
                height:'{$img.h}',
                minZoom:10,
                maxZoom:150
            }
        });
        cropzoom.setSelector(45,45,200,200,true);
        $('.hy-js-savecut').click(function(){ 
            cropzoom.send('index.php?g=admin&m=index&a=act_cutimg','POST',{},function(res){
               if(res.error==0)
               {
               	alert(res.content);
               	 $('#thumb').val(res.data);
               }
               else
               {
               	  alert(res.content);
               }
            },'json');
        });
        $('.hy-js-restore').click(function(){
           // $('.result').find('img').remove();
          //  $('.result').find('.txt').show()
            cropzoom.restore();
        })
    });

  </script>
	</body>
	
</html>
